import MySearch from "@/components/my-search";
import { title } from "@/components/primitives";
import { Card, CardBody, CardFooter, CardHeader } from "@heroui/card";
import { Divider } from "@heroui/divider";
import { Link } from "@heroui/link";
import { CgDetailsMore } from "react-icons/cg";
import { Image } from "@heroui/image";
import { Button } from "@heroui/button";
import { IoCloudDownloadOutline } from "react-icons/io5";
import { CiShare1 } from "react-icons/ci";
import PcViewVode from "@/app/(details)/details/[[...query]]/pc-view-code";
import { Feedback } from "./feedback";
import GetLink from "./getLink";
import MyShare from "./my-share";
import { MyResponse, QueryIProps, request } from "@/lib/request";
import { ObtainYearAndMonth } from "@/lib/dateFormat";
import type { Metadata } from 'next';
import { siteConfig } from "@/config/site";

interface Props {
  params: { query: string };
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { query } = await params;

  // 请求 API 获取对应短剧数据
  const post = await request<MyResponse>(
    "/queryVideoById",
    "GET",
    { id: query?.[0] },
  );

  if (!post?.data?.current) {
    return {
      title: "短剧未找到",
      description: "该短剧可能已被删除或不存在。",
      keywords: '短剧, 电视剧, 短剧视频, 短剧剧情, 热门短剧, 短剧在线观看, 甜宠剧情, 演员, 导演', // 默认关键词
    };
  }
  const { current, prev, next } = post.data;

  // 根据短剧信息生成动态关键词
  const keywords = [
    current.title,  // 短剧标题
    // ...current.actors,  // 演员作为关键词
    // ...current.directors,  // 导演作为关键词
    '短剧',
    '短剧视频',
    '夸克网盘', // 平台关键词
    '热门短剧', // 额外可选关键词
    '短剧在线观看', // 额外可选关键词
    '高能反转', // 适用于悬疑/爽剧
    '甜宠剧情', // 适用于甜宠类短剧
  ];
  const description = `夸克4K-为您提供最新的短剧资源合集：《${current.title}》；收录海量短剧资源，包括最新短剧 软件工具 教程 游戏 影视 音乐 杂志 电子书 有声资源 素材模板...高质量资源分享`
  return {
    // 页面标题
    title: current.title,
    // 页面描述
    description: description,
    keywords: `免费短剧,热门短剧,短剧推荐,精品短剧,热门短剧,${current.title}`,
    // Open Graph 元数据
    openGraph: {
      title: current.title,
      description: description,
      type: 'article', // 或 'video.movie'
      images: [
        {
          url: "/images/Open1200.png",
          width: 1200,
          height: 630,
          alt: current.title,
        },
      ],
      section: '短剧',
      url: `${siteConfig.url}/details/${query?.[0]}`
    },
    // Twitter 卡片信息
    twitter: {
      card: 'summary_large_image',
      title: current.title,
      description: description,
      images: [
        {
          url: "/images/Open1200.png",
          width: 1200,
          height: 630,
          alt: current.title,
        },
      ],
      site: siteConfig.twitter.site,  // 网站的官方 Twitter 账号
      creator: siteConfig.twitter.creator,  // 内容创作者的 Twitter 账号
    },
    // 其他 SEO 配置
    robots: {
      index: true,
      follow: true,
    },
    alternates: {
      canonical: `${siteConfig.url}/details/${query?.[0]}`
    }
  };
}


export default async function Details({ params }: QueryIProps) {
  const { query } = await params

  const detRes = await request<MyResponse>("/queryVideoById", "GET", { id: query?.[0] })
  const { current, prev, next } = detRes?.data

  const random = await request<MyResponse>("/queryHotList", "GET", {})
  return (
    <div>
      <MySearch />

      <Card className="" radius="none">
        <CardBody>
          <div className="flex flex-col justify-center items-center gap-4 py-4">
            <h1 className="text-xl text-[#333333]">{current?.title}</h1>
            <div className="flex items-center gap-4">
              <span className="text-[#ff5a59]">时间：{ObtainYearAndMonth(current?.updatedAt)}</span>
              <Feedback />
            </div>
            <Divider />
            <div className="py-6">
              <div className="flex flex-wrap justify-start items-center gap-4">
                <div className="w-full sm:w-auto">资源地址: </div>
                <div className="flex flex-row items-center">
                  <Image alt="夸克" src="/images/quark_icon.ico" width={26} />
                  <span>夸克</span>
                </div>
                <div>
                  <GetLink current={current} />
                </div>
                <div>
                  <MyShare current={current} />
                </div>
                {/* <div className="hidden sm:block">
                  <PcViewVode current={current} />
                </div> */}
              </div>
            </div>

            <div className="flex flex-row items-center gap-4">
              <Image
                alt="点击上方“链接”观看"
                src="/images/fengxiang.gif"
              />
              <span className="text-[#9d485f]">点击上方“获取链接”观看</span>
            </div>

            <div className="flex items-center justify-center space-x-4 w-full">
              <div className="flex-grow border-t border-gray-300"></div>
              <span className="px-4 text-center">精彩拓展</span>
              <div className="flex-grow border-t border-gray-300"></div>
            </div>

            <div className="flex flex-col gap-2 text-sm">
              <div>
                <span>1、</span>
                <Link href="#" className="text-sm" underline="always">
                  点击查看短剧库列表在线文档
                </Link>
              </div>
              <div>
                <span>2、</span>
                <Link href="/viewing" target="_blank" className="text-sm" underline="always">
                  点击学习资源转存和观看方法
                </Link>
              </div>
            </div>


          </div>
        </CardBody>
        <Divider />
        <CardFooter className="bg-background" >
          <div className="text-sm">
            <Link color="danger" href="/statement" target="_blank" underline="always">
              声明
            </Link>
            <span className="pl-2">本站是一个网盘资源检索网站，公益免费，仅做个人学习研究测试，不存储、复制、传播任何影音数据，更不提供下载服务，内容均来自第三方网盘用户的公开分享，无意侵犯任何人的合法权益，如有冒犯，</span>
            <span>请点击 </span>
            <Feedback>
              <span> 反馈清除</span>
            </Feedback>
            <span>！点这里学习观看教程</span>
          </div>
        </CardFooter>
      </Card >
      <Card radius="none">
        <CardBody>
          <div className="flex flex-col gap-3">
            {
              prev && <>
                <div>
                  <span>上一篇： </span>
                  <Link color="foreground" underline="always" target="_blank" href={`/details/${prev?.id}`}>
                    {prev?.title}
                  </Link>
                </div>
              </>
            }
            {
              next && <>
                <div>
                  <span>下一篇：</span>
                  <Link color="foreground" underline="always" target="_blank" href={`/details/${next?.id}`}>
                    {next?.title}
                  </Link>
                </div>
              </>
            }

          </div>
        </CardBody>
      </Card >


      <Card className="mt-4" radius="none" >
        <CardHeader className="flex gap-3 ">
          <div className="w-full flex flex-row justify-between items-center">
            <div className="flex flex-row items-center text-[#0c83e8]">
              <CgDetailsMore size={22} />
              <div className="flex flex-col">
                <p className="text-lg">同类资源</p>
                {/* <p className="text-small text-default-500">heroui.com</p> */}
              </div>
            </div>
            <div className="text-red-500">
              万一你需要呢？
            </div>
          </div>
        </CardHeader>
        <Divider />
        <CardBody>
          <div className="flex flex-col gap-3">
            {/* random */}
            {
              random.data?.list?.map((item: any) => {
                return (
                  <div key={item.id + 'shuiji'}>
                    <span className="text-sm text-gray-500">{item.view} 次</span>
                    <span className="ml-2 bg-[#edf0ff] text-sm p-1">{item.webdramaType}</span>
                    <Link href="#" className="inline-block pl-2" target="_blank" color="foreground" underline="hover">
                      {item.title}
                    </Link>
                  </div>
                )
              })
            }


          </div>
        </CardBody>
      </Card >


    </div>
  );
}
